<template>
	<view class="content">
		<image class="headicon" :src="userinfo.headicon" mode=""></image>
		<view>
			<text>{{userinfo.username}}</text>
		</view>
		<view class="entry-wrapper">
			<view class="item">
				<text>个人信息</text><image src="../../static/right.png" mode=""></image>
			</view>
			<view class="item">
				<text>订单列表</text><image src="../../static/more.png" mode=""></image>
			</view>
			<view class="item">
				<text>修改密码</text><image src="../../static/more.png" mode=""></image>
			</view>
			<view class="item">
				<text>意见反馈</text><image src="../../static/more.png" mode=""></image>
			</view>
		</view>
		<button type="primary">退出</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				userinfo:{
					userid:'001',
					headicon:'/static/cat-1.png',
					username:'xubin'
				}
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		
		
	}
	.headicon{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin: 100rpx;
	}
	.entry-wrapper{
		width: 90%;
		/* background-color: #888; */
		margin-top:50rpx;
	}
	.entry-wrapper .item{
		/*水平线性布局*/
		display: flex;
		flex-direction: row;
		/*子元素两端对齐*/
		justify-content: space-between;
		/*高度80rpx*/
		height: 80rpx;
		/*子元素在交叉轴上（y）居中对齐*/
		align-items: center;
		/*添加上下边框线*/
		border-bottom: #333 solid 1rpx;
	}
	.entry-wrapper .item:first-child{
		/*给第一个item加上边框线*/
		border-top: #333 solid 1rpx;
	}
	.entry-wrapper .item image{
		width: 48rpx;
		height: 48rpx;
	}
	button{
		width: 95%;
		margin-top: 50rpx;
	}
</style>
